<template>
  <div class="header-container">
    <div class="l-content">

      <!-- 侧栏收起展开按钮 -->
      <el-button @click="handleCollapse">
        <el-icon :size="18">
          <Menu></Menu>
        </el-icon>
      </el-button>

      <el-link class="mall-index-link" icon="Goods" :underline=false @click="toMallIndex">
        商城首页
      </el-link>

      <!-- 面包屑 -->
      <!-- <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb> -->

    </div>
    <div class="r-content">
      <el-dropdown>
        <el-avatar :src="avatarUrl" alt="avatar" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<style lang="less" scoped>
.header-container {
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px; // 上下0，左右18px

  .l-content {
    display: flex;
    align-items: center;

    .mall-index-link {
      margin-left: 20px;
      font-size: 18px;
      color: rgb(180, 169, 169);
    }

    .mall-index-link:hover {
      color: rgb(224, 215, 215);
    }

    .breadcrumb {
      color: #fff;
      font-size: 15px;
      margin-left: 13px;
    }
  }

  .r-content {
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
</style>


<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import img_url_pre from '../utils/img_url_filter'

let store = useStore()
let login = false;
let role = 1;
let router = useRouter();
let { proxy } = getCurrentInstance();

onMounted(async () => {
  // 获取当前登录状态
  login = store.state.user.userId !== null;
  role = store.state.user.role;
  if (login)
    getImgSrc();
  else
    avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
});

let avatarUrl = ref("");

let getImgSrc = () => {
  proxy.$api.user.getUser(store.state.user.userId).then(ret => {
    if (ret.data.picture)
      avatarUrl.value = img_url_pre(ret.data.picture);
    else
      avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
  }).catch(error => {
    console.log(error);
    avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
  });
}

let handleCollapse = () => {
  // 调用vuex中的mutations
  store.commit('updateIsCollapse');
}

const toMallIndex = () => {
  router.push({
    path: '/mall/index'
  });
}

const userCenter = () => {
  router.push({
    path: '/mall/user_center'
  })
}

// 简单地退出登录
const logout = () => {
  store.commit('user/clearAuth');
  login = false;
  role = 1;
  router.push('/mall/index');
}

</script>
